<template>
  <el-dialog
    :model-value="props.show"
    title="选择用户"
    width="700"
    @close="emits('cancel')"
  >
    <div class="mt-12">
      <el-form :model="searchForm" inline>
        <el-form-item label="昵称">
          <el-input
            v-model="searchForm.nickname"
            placeholder="输入用户昵称"
            class="w200px"
          >
          </el-input>
        </el-form-item>
        <el-space>
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-space>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="avatar" label="微信头像" width="100">
          <template #default="scope">
            <img :src="scope.row.avatar" class="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="微信昵称"></el-table-column>
        <el-table-column prop="phone" label="手机" width="140" />
        <el-table-column prop="points" label="积分" width="80" />
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="selectHandle(scope.row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-24">
        <Pagination
          class="text-center"
          :page="pageForm.page"
          :limit="pageForm.limit"
          :total="tableTotal"
          @pagination="pageHandle"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted, defineProps, defineEmits } from 'vue';
import { apiUserList } from '@/api/user';
import { apiShopAll } from '@/api/merchant';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['submit', 'cancel']);
const tableData = ref([]);
const tableTotal = ref(0);
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 10
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 搜索
const searchForm = ref({
  nickname: ''
});
const resetSearch = () => {
  searchForm.value = {
    nickname: ''
  };
  searchHandle();
};
const searchHandle = () => {
  pageForm.value.page = 1;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiUserList({
    ...pageForm.value,
    ...searchForm.value
  });
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
// 获取商家列表
const shopOptions = ref([]);
const getShopOptions = async () => {
  const { data } = await apiShopAll({ limit: 9999, page: 1 });
  shopOptions.value = data;
};
onMounted(() => {
  getShopOptions();
});
// 选择
const selectHandle = (record) => {
  emits('submit', record);
};
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
.cover {
  height: 36px;
  width: 36px;
  border-radius: 6px;
}
.w200px {
  width: 200px;
}
</style>
